<template>
  <h1 class="m-v-30">组建事件</h1>
  <h3 class="m-v-10">触发与监听事件</h3>
  <div>
    $emit触发事件
  </div>

  <h3 class="m-v-10">事件参数</h3>
  <div>
    $emit('change',1)
  </div>

  <h3 class="m-v-10">声明触发的事件</h3>

  <div>
    在setup语法糖中 <br>
    const emit = defineEmits(['change','submit'])//声明 <br>
    emit('submit',12)//使用 <br>

    在setup函数中<br>
    emits:['change','submit'],<br>
    setup(props,{emit}){<br>
    emit('submit') <br>
    } <br>

  </div>
  <div>
    如果一个原生事件的名字 (例如 click) 被定义在 emits 选项中，则监听器只会监听组件触发的 click 事件而不会再响应原生的 click 事件。
  </div>

  <h3 class="m-v-10">事件校验</h3>
  <div>例如在触发事件时必须穿参数</div>
  <h3 class="m-v-10">配合v-model使用</h3>
  <div>
    <Count @changeTotal="changeTotal"></Count>
    {{total}} <br>
    <VModel :modelValue="searchText"
      @update:modelValue="newValue=>searchText=newValue"></VModel>
    <br>
    {{searchText}}

    <br>

    v-model修饰符
    <VModelModifier v-model.capitalize="inputText" />
    {{inputText}}
  </div>

  <div>

  </div>
</template>

<script setup lang="ts">
import VModel from "@/components/vModel.vue";
import VModelModifier from '@/components/vModelModifier.vue'
import { ref } from "@vue/reactivity";



let searchText = ref('')
let total = ref(0)
let inputText = ref('')

const changeTotal = (data) => {
  total.value += data
}


</script>

<style scoped>
</style>